<template>
    <div class='qf-good-item'>
        <img @touchstart='skipToDetail' :src='$img.baseUrl+goods.img' />
        <div class="desc" v-text="goods.desc"></div>
        <div class='bot'>
            <span class="price" v-text="'￥'+goods.price"></span>
            <span class="simlar">看相似</span>
        </div>
    </div>
</template>

<script>

export default {
	props:{
		goods:{type:Object,required:true}
	},
	methods:{
		skipToDetail(){
			this.$router.push('/good/detail/'+this.goods._id)
		}
	}
}
</script>

<style lang='scss' scoped>
.qf-good-item {
	flex: 1;
	margin: .133333rem;
	background: white;
	&>img {
		display: block;
		width: 4.613333rem;
		height: 4.613333rem;
		margin: 0 auto;
		border-radius: .066667rem;
	}
	.desc{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		color: #1a1a1a;
		margin-top: .133333rem;
		line-height: .426667rem;
		margin-bottom: .08rem;
		padding: 0 .106667rem;
	}
	.price{
		display: inline-block;
		padding: 0 .133333rem 0 .106667rem;
		color: #fa2c19;
		line-height: .666667rem;
		font-weight: bold;
		font-size: .4rem;
	}
	.simlar{
		float: right;
		color: grey;
		margin-right: .133333rem;
		padding: 0.3em;
		background-color: #f0f2f5;
		border-radius: .45rem;
	}
}
</style>
